<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<input type="text">
<input type="button" value="加" onclick="fn(1)">
<input type="button" value="减" onclick="fn(2)">
<input type="button" value="乘" onclick="fn(3)">
<input type="button" value="除" onclick="fn(4)">
<h1>结果:<span></span></h1>
<!--引入jq框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    function fn(flag) {
        let x = $("input:eq(0)").val();
        let y = $("input:eq(1)").val();
        //判断输入的内容是否是数值
        if (isNaN(x)||isNaN(y)){
            $("span").text("输入错误!");
            return;
        }
        switch (flag) {
            case 1:
                $("span").text(x*1+y*1);
                break;
            case 2:
                $("span").text(x-y);
                break;
            case 3:
                $("span").text(x*y);
                break;
            case 4:
                $("span").text(x/y);
                break;

        }

    }


    function fn1() {
        let x = $("input:eq(0)").val();
        let y = $("input:eq(1)").val();
        $("span").text(x*1+y*1);
    }
    function fn2() {
        let x = $("input:eq(0)").val();
        let y = $("input:eq(1)").val();
        $("span").text(x-y);
    }
    function fn3() {
        let x = $("input:eq(0)").val();
        let y = $("input:eq(1)").val();
        $("span").text(x*y);
    }
    function fn4() {
        let x = $("input:eq(0)").val();
        let y = $("input:eq(1)").val();
        $("span").text(x/y);
    }
</script>
<!--
1. 引入jq框架
2. 在每个按钮里面添加onclick="fn1()"   fn2()  fn3() fn4()
3. 在script标签里面声明四个方法
4. 在每个方法里面取出文本框里面的值然后进行加减乘除运算 把结果
显示到span标签里面
-->

</body>
</html>